<template>
  <div>
    <div v-if="topics.length">
      <div
        class="content"
        v-for="(item, index1) in topics"
        :key="item.topic_id"
      >
        <!-- 标题 -->
        <el-row>
          <a :href="'/topic/' + item.topic_id + ''">
            <h1>{{ item.topic_title }}</h1>
          </a>
        </el-row>

        <el-row>
          <!-- 图片 -->
          <el-col :span="8">
            <div class="head_img">
              <img :src="item.topic_pic" alt="" />
            </div>
          </el-col>
          <!-- 内容 -->
          <el-col :span="16">
            <div class="topic_content">
              <p v-html="item.topic_content"></p>
            </div>
          </el-col>
        </el-row>
        <!-- 图标 -->
        <el-row>
          <div class="ico_list">
            <span v-if="user_id">
              <el-link :underline="false" v-if="isAgree(item.topic_id)">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-check"
                  @click="changeAgree(index1)"
                  >已赞同 {{ item.topic_agreeNum }}</el-button
                >
              </el-link>

              <el-link :underline="false" v-else>
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  icon="el-icon-check"
                  @click="changeAgree(index1)"
                  >赞同 {{ item.topic_agreeNum }}</el-button
                >
              </el-link>
            </span>

            <span v-else>
              <el-link :underline="false">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  icon="el-icon-check"
                  @click="changeAgree(index1)"
                  >赞同 {{ item.topic_agreeNum }}</el-button
                >
              </el-link>
            </span>

            <el-link icon="el-icon-chat-line-round" :underline="false"
              >评论 <span> {{ item.topic_commentNum }}</span></el-link
            >
            <el-link
              @click="changeFavorite(index1)"
              :underline="false"
              v-if="isFavorite(item.topic_id)"
            >
              <i class="el-icon-star-on" style="color: orange"></i>
              <span>已收藏</span>
            </el-link>
            <el-link @click="changeFavorite(index1)" :underline="false" v-else>
              <i class="el-icon-star-on"></i>
              <span>收藏</span>
            </el-link>
            <el-link icon="el-icon-share" :underline="false">转发</el-link>
          </div>
        </el-row>
      </div>
    </div>
    <el-row v-else>
      <div style="text-align: center">暂无收藏的话题...</div>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      user_id: JSON.parse(sessionStorage.getItem('user')).user_id,
      topics: [],
      agree: [],
      favorite: []
    }
  },
  created () {
    this.getTopic()
  },
  methods: {
    // 获取话题
    async getTopic () {
      const { data: res } = await this.$http.post('/favorite_topic', { id: this.user_id })
      const { data: agreeData } = await this.$http.get('/agree_topic?id=' + this.user_id)
      const { data: favoriteData } = await this.$http.get('/favorite_topic?id=' + this.user_id)
      if (res.status !== 200) return
      this.topics = res.topic_info
      this.agree = agreeData
      this.favorite = favoriteData
    },
    // 点赞的方法
    async changeAgree (index) {
      const agreeObj = {
        topic_id: this.topics[index].topic_id,
        topic_agreeNum: this.topics[index].topic_agreeNum,
        user_id: JSON.parse(sessionStorage.getItem('user')).user_id
      }
      const { data: res } = await this.$http.put('/agree_topic', agreeObj)

      if (res.status === 200) {
        this.$message.success('点赞成功！')
      } else {
        this.$message('取消点赞成功！')
      }
      this.getTopic()
    },
    // 收藏的方法
    async changeFavorite (index) {
      const favoriteObj = {
        topic_id: this.topics[index].topic_id,
        user_id: JSON.parse(sessionStorage.getItem('user')).user_id
      }
      const { data: res } = await this.$http.put('/favorite_topic', favoriteObj)

      if (res.status === 200) {
        this.$message.success('收藏成功！')
      } else {
        this.$message('取消收藏成功！')
      }
      this.getTopic()
    },
    isAgree (topicId) {
      for (let i = 0; i < this.agree.length; i++) {
        if (this.agree[i].topic_id === topicId) {
          return true
        }
      }
    },
    isFavorite (topicId) {
      for (let i = 0; i < this.favorite.length; i++) {
        if (this.favorite[i].topic_id === topicId) {
          return true
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.head_img {
  width: 200px;
  height: 105px;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
}

.topic_content {
  height: 105px;
  overflow: hidden;
}

.el-link {
  margin-top: 15px;
  margin-right: 20px;
}

.ico_list {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

p {
  margin: 0;
  margin-left: 15px;
}

a {
  color: #303133;
}

/deep/ h3 {
  margin: 0;
}
</style>
